<template>
  <div>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="车辆照片" align="center" prop="pic">
        <template slot-scope="scope">
          <img v-bind:src="scope.row.pic" class="img-circle-shop img-lg-shop"/>
        </template>
      </el-table-column>
      <el-table-column label="车辆名称" align="center" prop="name" width="200"/>
      <el-table-column label="车牌号" align="center" prop="carnum"/>
      <el-table-column label="变速箱" align="center"  prop="grarbox">
        <template slot-scope="{row: {grarbox}}">
          <span v-if="+grarbox === 1">手动挡</span>
          <span v-else-if="+grarbox === 2">自动挡</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆类型" align="center" prop="linkman">
        <template slot-scope="{row: {cartype}}">
          <span v-if="+cartype === 1">SUV</span>
          <span v-else-if="+cartype === 2">轿车</span>
          <span v-else-if="+cartype === 3">纯电新能源</span>
          <span v-else-if="+cartype === 4">油电混动</span>
          <span v-else-if="+cartype === 5">商务车</span>
          <span v-else-if="+cartype === 6">房车</span>
          <span v-else-if="+cartype === 8">超跑</span>
        </template>
      </el-table-column>
      <el-table-column label="颜色" align="center" prop="colour"/>
      <el-table-column label="车身结构" align="center" prop="structure">
        <template slot-scope="{row: {structure}}">
        <span v-if="+structure === 1">两厢</span>
        <span v-else-if="+structure === 2">三厢</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆状态" align="center" prop="status">
        <template slot-scope="{row: {status}}">
          <span v-if="+status === 1">空闲</span>
          <span v-else-if="+status === 2">已租</span>
          <span v-else-if="+status === 2">下架</span>
          <span v-else-if="+status === 2">维修中</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
      >
        <template v-slot:default="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['merchant:goods:edit']"
          >修改
          </el-button>
          <el-button
            type="text"
            icon="el-icon-map-location"
            size="mini"
            v-if="scope.row.imei&&scope.row.imei!=''"
            @click="handleMapLocation(scope.row)"
          >获取定位
          </el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                       v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="handleDelete"
                icon="el-icon-delete"
                v-hasPermi="['merchant:goods:remove']"
              >删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <add-vehicle @update="getList" ref="addVehicle" :status-options="statusOptions"
                 :shop-ranges-option="shopRangesOption"/>
  </div>
</template>

<script>
import {listData} from "@/api/system/dict/data";
import {delCar, getCar, listCar} from "@/api/merchant/car";
import addVehicle from "@/views/vehicle/computed/addVehicle";

export default {
  props: ['total', 'loading', 'list'],
  components: {addVehicle},
  name: "vehicle",
  data:{
    total:0,
    page:{
      pageNum:0,
      pageSize:10
    }

  },
  methods: {
    handleSelectionChange(){
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate(item) {
      getCar(item.id).then(res => {
        if (res.code == 200) {
          this.$refs.addVehicle.open(res.data)
        }
      })
    },
    handleCommand(command, row) {
      switch (command) {
        case "handleDelete":
          this.handleDelete(row)
          break
        case "handleBingGPS":
          this.handleBingGPS(row)
          break
        // case "handleMapLocation":
        //   this.handleMapLocation(row)
        default:
          break;
      }
    },
    /** 删除按钮操作 */
    handleDelete(item) {
      let storesId = item.id || this.ids
      this.$modal.confirm('是否确认删除车辆编号为"' + storesId + '"的数据项？').then(function () {
        return delCar(storesId);
      }).then(() => {
        window.parent.location.reload()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function () {
        return changeUserStatus(row.userId, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    handleMapLocation(row) {
      this.$router.push({
        path: '/vehicle/map',
        query: {
          defaultChoseCar: row.id
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
